<template>


  <a-card :bordered="false">
    <div class="table-page-search-wrapper">

    </div>

    <div class="table-operator">
      <a-row>
        <a-col :span="20">
          <!--<a-input-search-->
            <!--placeholder="请输入关键字"-->
            <!--@search="onSearch"-->
            <!--enterButton="查询"-->
            <!--size="large" />-->
        </a-col>
        <a-col :span="4" class="text-align-right">
          <TableExport :columns="tablesColumns" :dates="tableData" :selectId="selectedRowKeys" outName="登录日志"></TableExport>
          <!--<a-button type="primary">导出</a-button>-->
        </a-col>
      </a-row>


    </div>
    <a-alert message="总共条数：2382条，失败：783条，成功：889条。" banner />
    <a-table
      ref="table"
      size="default"
      :columns="columns"
      :dataSource="tableData"
      :rowSelection="rowSelection"
      :showAlertInfo="true"
      @onSelect="onChange"
    >
      <span slot="number" slot-scope="text,record,index">
                {{index + 1}}
            </span>
      <span slot="action" slot-scope="text, record">

              <a  style="color: red;">
                   <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)" okText="确定" cancelText="取消">
                           <a-icon type="delete" />删除
                    </a-popconfirm>
              </a>

            </span>
    </a-table>


  </a-card>

</template>

<script>
  import STable from '@/components/table/'
  import ATextarea from "ant-design-vue/es/input/TextArea"
  import AInput from "ant-design-vue/es/input/Input"
  import moment from "moment"
  import {getRoleList, getServiceList} from '@/api/manage'
  import indexedDB from '../../db/db'
  import {loginLog} from "../../db/loginLog"
  import TableExport from '../../components/table-export/table-export';
  export default {
    name: "landResourceList",
    components: {
      AInput,
      ATextarea,
      STable,
      TableExport
    },
    computed: {
      rowSelection() {
        const { selectedRowKeys } = this;
        return {
          selectedRowKeys,
          onChange: this.onSelectChange,
          hideDefaultSelections: true,
          selections: [{
            key: 'all-data',
            text: 'Select All Data',
            onSelect: () => {
              this.selectedRowKeys = [...Array(46).keys()]; // 0...45
            },
          }, {
            key: 'odd',
            text: 'Select Odd Row',
            onSelect: (changableRowKeys) => {
              let newSelectedRowKeys = [];
              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                if (index % 2 !== 0) {
                  return false;
                }
                return true;
              });
              this.selectedRowKeys = newSelectedRowKeys;
            },
          }, {
            key: 'even',
            text: 'Select Even Row',
            onSelect: (changableRowKeys) => {
              let newSelectedRowKeys = [];
              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                if (index % 2 !== 0) {
                  return true;
                }
                return false;
              });
              this.selectedRowKeys = newSelectedRowKeys;
            },
          }],
          onSelection: this.onSelection,
        }
      }
    },
    data() {
      return {
        detailBool:false,
        visible: false,
        searchText:"",
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        },
        policyFormData:{
          title:"",
          sendPeople:"",
          date:"",
          area:"",
          keyWord:"",
          content:"",
        },
        mdl: {},

        // 高级搜索 展开/关闭
        advanced: true,
        // 查询参数
        queryParam: {},
        tablesColumns:[
          {
            title: '账号',
            key: 'account'
          },
          {
            title: '登录时间',
            key: 'loginDate'
          },
          {
            title: 'IP地址',
            key: 'IpCard',
            width: 120
          },
          {
            title: '是否成功',
            key: 'state',

          }
        ],
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: 'number',
            scopedSlots: {customRender: 'number'},
          },
          {
            title: '账号',
            dataIndex: 'account',
          },
          {
            title: '登录时间',
            dataIndex: 'loginDate',
          },
          {
            title: 'IP地址',
            dataIndex: 'IpCard',
          },
          {
            title: '是否成功',
            dataIndex: 'state',
          },

          {
            title: '操作',
            dataIndex: 'action',
            width: '200px',
            scopedSlots: {customRender: 'action'},
          },
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return getServiceList(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res.result
            })
        },

        selectedRowKeys: [],
        selectedRows: [],
        //数据库
        tableData: [],
      }
    },
    created() {
      getRoleList({t: new Date()})
    },
    mounted() {
      indexedDB.initDB()
      indexedDB.batInit('loginLog', loginLog);// 初始化数据
      this.getlandResourceList()
    },
    methods: {
      onSelectChange (selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys
        console.log(this.selectedRowKeys);
      },
      getlandResourceList() {
        let that = this
        this.visible = false;
        indexedDB.handleDataByCursor('loginLog').then(res => {

          if (res.length > 0) {
            that.tableData = res
            console.log(that.tableData)
          }
        })
      },
      onSearch(e){
        console.log(e)
        this.searchText = e;
        // this.getlandResourceList()
        let that = this
        // indexedDB.handleDataByIndex('landResource',"不定产权证", "licenseType").then(res => {
        //
        //   if (res.length > 0) {
        //     that.tableData = res
        //     console.log(that.tableData)
        //   }
        // })
      },
      handleEdit(record) {
        this.visible = true
        this.$nextTick(()=>{
          this.$refs.landForm.handleEdit(record);
        })
      },
      handleVerify(record){
        this.policyFormData = Object.assign({}, record)
        this.verifyBool = true;
      },
      handleDetail(record){
        this.policyFormData = Object.assign({}, record)
        this.detailBool = true;
      },
      handleDelete(record) {
        indexedDB.delete({name:"loginLog"},record.id).then((res)=>{
          if(res==true){
            this.$message.error("删除成功！");
            this.getlandResourceList()
          }else{
            this.$message.error("删除失败！");
          }
        })
      },
      onChange(row) {
        this.selectedRowKeys = row.selectedRowKeys
        this.selectedRows = row.selectedRows

        console.log(this.$refs.table)
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      },

      resetSearchForm() {
        this.queryParam = {
          date: moment(new Date()),
        }
      },




    },
    watch: {

    },
  }
</script>